<!--
 * @Author: your name
 * @Date: 2021-10-22 20:46:27
 * @LastEditTime: 2021-11-19 23:03:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yunnan\src\components\Header\header.vue
-->
<template>
  <div class="header">
    <div class="title">
      <p @click="goback()">
        {{ leftTitle }}
      </p>
    </div>
    <!-- <div class="links">
      <div
        @click="LinkClick(item)"
        :class="linkActive.indexOf(item.path) !== -1 ? 'link isactive' : 'link'"
        v-for="item in Links"
        :key="item.key"
      >
        {{ item.name }}
      </div>
    </div> -->

    <!-- :class="linkActive.indexOf(item.path) !== -1 ? 'link isactive' : 'link'" -->
    <div class="links">
      <!-- <div
        @click="LinkClick(item)"
        :class="linkActive.indexOf(item.path) !== -1 ? 'link isactive' : 'link'"
        v-for="item in Links"
        :key="item.key"
      >
        {{ item.name }}
      </div> -->
      <div class="link" @click="LinkClick(Links[0],'用地分析')" :class="LinksActive == '用地分析' ? 'isactive' : ''" >
        {{ Links[0].name }}
      </div>
      <div class="link" @click="LinkClick(Links[1],'选址分析')" :class="LinksActive == '选址分析' ? 'isactive' : ''" >
        {{ Links[1].name }}
      </div>
    </div>
    
    <div class="tools" @click="weatherClick()" title="光影工具栏">
      <div class="date-time">
        <div class="time">
          <p>
            {{ time }}
          </p>
        </div>
      </div>
      <div v-if="WeatherData" class="weather">
        <div class="icon">
          <i
            :style="{ color: '#fff' }"
            :class="'qi-' + WeatherData.iconDay"
          ></i>
        </div>
        <div class="case">
          <!-- <div class="type">
            <p>
              {{ WeatherData.textDay }}
            </p>
          </div> -->
          <div class="temp">
            <span>
              {{ WeatherData.tempMin + "°C" }}
            </span>
            ~
            <span>
              {{ WeatherData.tempMax + "°C" }}
            </span>
          </div>
        </div>
      </div>
      <!-- <div v-if="WeatherPm2P5" class="pm25">
        <div class="icon_pmwp5">
          <img src="../../assets/images/home/icon_pm2.5@2x.png" alt="" />
        </div>
        <div class="case">
          <div class="type">
            <p>
              {{ WeatherPm2P5.now.category }}
            </p>
          </div>
          <div class="case_data">
            <p>
              {{ WeatherPm2P5.now.pm2p5 }}
            </p>
          </div>
        </div>
      </div> -->
    </div>
    <weather v-show="weather_active" :weather_active="weather_active"></weather>
  </div>
</template>

<script>
import Dayjs from "dayjs";
import weather from "../weather/weather.vue";

import {
  getWeatherCityId,
  getWeather,
  // getWeatherPm2P5,
} from "../../api/connect";
// 云南省昆明市官渡区
export default {
  data() {
    return {
      weather_active: false, // 判断是否打开天气工具栏
      time: "",
      WeatherData: null,
      WeatherPm2P5: null,
      linkActive: "",
      // 左侧的标题
      leftTitle: "项目选址",
      // 左侧标题的index
      leftTitleIndex: 0,
      Links: [
        // {
        //   name: "水务一张图",
        //   key: "swyzt",
        //   path: "/home/swyzt",
        // },
        // {
        //   name: "项目选址",
        //   key: "xmxz",
        //   path: "/home/xmxz",
        // },
        {
          name: "用地分析",
          key: "usablePush",
          path: "/home/xmxzUsable",
        },
        {
          name: "选址分析",
          key: "xmxz",
          path: "/home/xmxz",
        },
      ],
      LinksActive:"选址分析",
    };
  },
  computed: {},
  watch: {},
  methods: {
    async goback() {
      /* this.$router.push({
        path: "/swday",
        // params: {},
      }); */
      //相机复位
      await __g.camera.set(
        611850.4375,
        2513224.5,
        9255.035156,
        -41.228653,
        -102.565666
      );
    },
    // 路由跳转
    LinkClick(val,Type) {
      console.log(val, "路由跳转");
      this.LinksActive = Type
      this.linkActive = val.path;
      this.$router.push(val.path);
      //   if (val.name == "选址分析") {
      //     this.leftTitle = "选址分析";
      //   }
      //   if (val.name == "水务一张图") {
      //     this.leftTitle = "水务一张图";
      //   }
      if (val.name == "用地分析") {
       window.__g.polygon.clear();

        // this.leftTitle = "用地分析";
      }
      if (val.name == "选址分析") {
       window.__g.polygon.clear();

        // this.leftTitle = "选址分析";
      }
    },
    // 获取当前时间
    get_Date_Time() {
      let date_time = Dayjs().format("YYYY-MM-DD");

      this.time = date_time;
    },
    // 获取天气信息
    async getWeatherData() {
      // 开发环境时把天气地区设置成深圳
      let name = process.env.NODE_ENV === "development" ? "深圳" : "汕尾";
      /**
       * @description: 获取城市ID
       * @param {name} 城市名
       * @return {ID} 城市ID
       */
      const CityId = await getWeatherCityId(name);
      console.log(CityId);
      /**
       * @description: 获取城市一天的天气信息
       * @param {ID} 城市ID
       * @return {CityWeather}城市一天的天气信息
       */
      const CityWeather = await getWeather(CityId.location[0].id);
      console.log(CityWeather);
      // CityWeather.now.icon === "154" ? (CityWeather.now.icon = "104") : null;
      this.WeatherData = CityWeather.daily[0];
      /**
       * @description: 获取pm2.5数据
       * @param {ID} 城市id
       * @return {WeatherPm2P5}pm2.5数据
       */
      // const CityWeather_Pm2P5 = await getWeatherPm2P5(CityId.location[0].id);
      // console.log(CityWeather_Pm2P5);
      // this.WeatherPm2P5 = CityWeather_Pm2P5;
    },

    // 是否弹出天气工具栏的事件
    weatherClick() {
      this.weather_active = !this.weather_active;
    },
  },
  created() {},
  mounted() {
    this.linkActive = this.$route.path;

    this.get_Date_Time();
    this.getWeatherData();
    this.timer = setInterval(() => {
      this.get_Date_Time();
    }, 1000);
    this.timer2 = setInterval(() => {
      this.getWeatherData();
    }, 36000);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
  },
  destroyed() {},
  activated() {},
  components: {
    weather,
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 95px;
  // background: url("../../assets/images/home/top_bg@2x.png") no-repeat
  //   center/cover;
  position: absolute;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(37, 52, 80, 0.8) 0%,
    rgba(5, 49, 126, 0) 100%
  );
  backdrop-filter: blur(4px);
  .title {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../assets/images/init/TOP_1.png") no-repeat center/cover;
    > p {
      font-family: HuXiaoBo-NanShen;
      font-style: normal;
      font-weight: normal;
      font-size: 40px;
      line-height: 50px;
      /* identical to box height */
      letter-spacing: 0.365em;
      color: #ffffff;
      text-shadow: 0px 5px 51px #1b3766;
    }
  }
  .links {
    width: 350px;
    height: 80%;
    position: absolute;
    right: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
      content: "/";
      position: absolute;
      width: 10px;
      height: 26px;
      right: 20px;
      top: 5px;
      bottom: 0;
      left: 20px;
      margin: auto;

      font-family: HuXiaoBo-NanShen;
      font-size: 24px;
      // line-height: 25px;
      text-shadow: 0px 5px 51px #1b3766;
    }
    .link {
      cursor: pointer;
      font-family: HuXiaoBo-NanShen;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 25px;
      letter-spacing: 0.365em;

      color: rgba(255, 255, 255, 0.5);

      text-shadow: 0px 5px 51px #1b3766;

      /* Inside Auto Layout */

      flex: none;
      order: 0;
      flex-grow: 0;
      margin: 0px 24px;
      transition: all 0.3s;
      &:hover {
        color: aqua;
      }
      &.isactive {
        color: #fff;
      }
    }
  }
  .tools {
    background: url("../../assets/images/init/右侧 1.png") no-repeat
      center/cover;
    background-size: 100%;
    cursor: pointer;
    width: 280px;
    height: 70%;
    position: absolute;
    right: 0;
    top: 0;
    > div {
      height: 100%;
      float: left;
    }
    .date-time {
      width: 46%;
      height: 100%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 15px;
        border-radius: 5px;
        background: #ffffff;
        opacity: 0.64;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .date {
        > p {
          font-family: DIN;
          font-style: normal;
          font-weight: 500;
          font-size: 18px;
          line-height: 22px;
          /* identical to box height */

          color: #ffffff;
        }
        margin-bottom: 5px;
      }
      .time {
        margin-top: 5px;

        > p {
          font-size: 18px;
          font-family: OPPOSans-H, OPPOSans;
          font-weight: normal;
          color: #ffffff;
          line-height: 31px;
          letter-spacing: 1px;
        }
      }
    }
    .weather {
      margin-left: 10px;

      position: relative;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 30px;
        > i {
          font-size: 18px;
        }
      }
      .case {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        .type {
          color: #ffffffd5;
        }
        .temp {
          font-size: 14px;
          font-weight: normal;
          color: #ffffff;
          line-height: 31px;
          letter-spacing: 1px;
          white-space: nowrap;
          font-weight: 600;
        }
      }
    }
    // .pm25 {
    //   width: 30%;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   .icon_pmwp5 {
    //     width: 50px;
    //     > img {
    //       width: 40px;
    //     }
    //   }
    //   .case {
    //     width: 40%;
    //     height: 50%;
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: space-around;
    //     align-items: flex-start;
    //     .type {
    //       color: #ffffffd5;
    //     }
    //     .case_data {
    //       font-size: 20px;
    //       font-weight: normal;
    //       color: #ffffff;
    //       line-height: 31px;
    //       letter-spacing: 1px;
    //       font-weight: 600;
    //     }
    //   }
    // }
  }
  .fadeout {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }
  .fadein {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }
}
</style>
